
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>vueJS · Aivin开发笔记</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Aivin">
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-plus/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-tbfed-pagefooter/footer.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-donate/plugin.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-local-video/video-js.min.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-theme-comscore/test.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../../styles/website.css">
        
    

        
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Vuex.html" />
    
    
    <link rel="prev" href="alias.html" />
    

    
        <link rel="shortcut icon" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
        <link rel="bookmark" href='../../assets/images/favicon.ico' type="image/x-icon">
    
    
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    个人信息
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="友情链接.html">
            
                <a href="友情链接.html">
            
                    
                    友情链接
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="js.html">
            
                <a href="js.html">
            
                    
                    web前端
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="html5.html">
            
                <a href="html5.html">
            
                    
                    html5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="js.html">
            
                <a href="js.html">
            
                    
                    js
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="css.html">
            
                <a href="css.html">
            
                    
                    css
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="JSX.html">
            
                <a href="JSX.html">
            
                    
                    JSX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="CommonJS.html">
            
                <a href="CommonJS.html">
            
                    
                    CommonJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ES6.html">
            
                <a href="ES6.html">
            
                    
                    ES6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="mockjs.html">
            
                <a href="mockjs.html">
            
                    
                    mockjs
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="ESLint.html">
            
                <a href="ESLint.html">
            
                    
                    ESLint
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="alias.html">
            
                <a href="alias.html">
            
                    
                    alias
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.10" data-path="vueJS.html">
            
                <a href="vueJS.html">
            
                    
                    vueJS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.11" data-path="Vuex.html">
            
                <a href="Vuex.html">
            
                    
                    Vuex
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.12" data-path="vue-router.html">
            
                <a href="vue-router.html">
            
                    
                    vue-router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.13" data-path="vue-i18n.html">
            
                <a href="vue-i18n.html">
            
                    
                    vue-i18n
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.14" data-path="element.html">
            
                <a href="element.html">
            
                    
                    element
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.15" data-path="iview.html">
            
                <a href="iview.html">
            
                    
                    iview
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.16" data-path="test.html">
            
                <a href="test.html">
            
                    
                    test
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >vueJS</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div class="search-plus" id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#vuejs"><b>1. </b>vueJS</a></li><ul><li><span class="title-icon "></span><a href="#vue&#x5B89;&#x88C5;"><b>1.1. </b>vue&#x5B89;&#x88C5;</a></li><li><span class="title-icon "></span><a href="#vue-&#x9879;&#x76EE;&#x7ED3;&#x6784;"><b>1.2. </b>vue &#x9879;&#x76EE;&#x7ED3;&#x6784;</a></li><li><span class="title-icon "></span><a href="#vue&#x751F;&#x547D;&#x5468;&#x671F;"><b>1.3. </b>vue&#x751F;&#x547D;&#x5468;&#x671F;</a></li><li><span class="title-icon "></span><a href="#&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;"><b>1.4. </b>&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;</a></li><li><span class="title-icon "></span><a href="#&#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;"><b>1.5. </b>&#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;</a></li><li><span class="title-icon "></span><a href="#vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;"><b>1.6. </b>vue &#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;</a></li><li><span class="title-icon "></span><a href="#component-&#x7EC4;&#x4EF6;"><b>1.7. </b>component &#x7EC4;&#x4EF6;</a></li><li><span class="title-icon "></span><a href="#slot-&#x7EC4;&#x4EF6;"><b>1.8. </b>slot &#x7EC4;&#x4EF6;</a></li><li><span class="title-icon "></span><a href="#keep-alive-&#x7EC4;&#x4EF6;"><b>1.9. </b>keep-alive &#x7EC4;&#x4EF6;</a></li><li><span class="title-icon "></span><a href="#vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition"><b>1.10. </b>vue &#x52A8;&#x753B;&#x7EC4;&#x4EF6; transition</a></li><li><span class="title-icon "></span><a href="#vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition-group"><b>1.11. </b>vue &#x52A8;&#x753B;&#x7EC4;&#x4EF6; transition-group</a></li><li><span class="title-icon "></span><a href="#&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E;-&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;"><b>1.12. </b>&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E; &#x3001;&#x751F;&#x547D;&#x5468;&#x671F;</a></li><li><span class="title-icon "></span><a href="#vue-&#x5168;&#x5C40;&#x914D;&#x7F6E;"><b>1.13. </b>vue &#x5168;&#x5C40;&#x914D;&#x7F6E;</a></li><li><span class="title-icon "></span><a href="#vue&#x7684;&#x5168;&#x5C40;api"><b>1.14. </b>vue&#x7684;&#x5168;&#x5C40;api</a></li><li><span class="title-icon "></span><a href="#vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;"><b>1.15. </b>vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;</a></li><li><span class="title-icon "></span><a href="#vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;_1"><b>1.16. </b>vue &#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;</a></li><li><span class="title-icon "></span><a href="#vue&#x6307;&#x4EE4;"><b>1.17. </b>vue&#x6307;&#x4EE4;</a></li><li><span class="title-icon "></span><a href="#vue&#x5B9E;&#x4F8B;&#x7684;-&#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;"><b>1.18. </b>vue&#x5B9E;&#x4F8B;&#x7684; &#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;</a></li><li><span class="title-icon "></span><a href="#hello-vue"><b>1.19. </b>hello vue</a></li><li><span class="title-icon "></span><a href="#&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;"><b>1.20. </b>&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;</a></li><li><span class="title-icon "></span><a href="#&#x5176;&#x4ED6;&#x7EC6;&#x8282;"><b>1.21. </b>&#x5176;&#x4ED6;&#x7EC6;&#x8282;</a></li></ul></ul></div><a href="#vuejs" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="vuejs"><a name="vuejs" class="anchor-navigation-ex-anchor" href="#vuejs"><i class="fa fa-link" aria-hidden="true"></i></a>1. vueJS</h1>
<p><a href="https://cn.vuejs.org/v2/guide/installation.html" target="_blank">vue.js</a> &#x662F;&#x4E00;&#x4E2A;&#x6846;&#x67B6;&#x3002;&#x5E76;&#x975E;&#x8BED;&#x8A00;&#x3002;</p>
<h2 id="vue&#x5B89;&#x88C5;"><a name="vue&#x5B89;&#x88C5;" class="anchor-navigation-ex-anchor" href="#vue&#x5B89;&#x88C5;"><i class="fa fa-link" aria-hidden="true"></i></a>1.1. vue&#x5B89;&#x88C5;</h2>
<p>&#x5B89;&#x88C5;vue&#x4E4B;&#x524D;&#x9700;&#x8981;&#x5148;&#x5B89;&#x88C5;  node&#x3001;npm</p>
<pre><code class="lang-xml">// &#x9A8C;&#x8BC1;node&#x662F;&#x5426;&#x5B89;&#x88C5;&#x6210;&#x529F;
node --version
//&#x9A8C;&#x8BC1;npm&#x662F;&#x5426;&#x5B89;&#x88C5;&#x6210;&#x529F;
npm --version
</code></pre>
<pre><code class="lang-xml">//-global &#x662F;&#x5168;&#x5C40;&#x5B89;&#x88C5;,&#x5B89;&#x88C5;node &#x7684;&#x6587;&#x4EF6;&#x5939;&#x4E0B; &#x3002;&#x5426;&#x5219;&#x4F1A;&#x5B89;&#x88C5;&#x5230;&#x5F53;&#x524D;&#x76EE;&#x5F55;&#x3002;
npm install --global vue-cli
vue --version

// &#x65B0;&#x5EFA;&#x5DE5;&#x7A0B;
vue init webpack my-project
//&#x5B89;&#x88C5;&#x6240;&#x9700;&#x4F9D;&#x8D56;(cd&#x8FDB;&#x5DE5;&#x7A0B;&#x76EE;&#x5F55;)
npm install
//&#x8FD0;&#x884C;&#x8C03;&#x8BD5;
npm run dev

IDE&#x63A8;&#x8350;&#x9009;&#x62E9; webstorm,&#x5B89;&#x88C5;&#x76F8;&#x5173;&#x63D2;&#x4EF6;&#x548C;&#x914D;&#x7F6E;&#x540E;&#xFF0C;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x5728;webstorm&#x4E2D;&#x8FD0;&#x884C;&#x9879;&#x76EE;&#xFF0C;&#x4E0D;&#x7528;&#x518D;&#x624B;&#x52A8;&#x8F93;&#x5165;&#x547D;&#x4EE4;&#x884C; npm run dev
</code></pre>
<p><br></p>
<h2 id="vue-&#x9879;&#x76EE;&#x7ED3;&#x6784;"><a name="vue-&#x9879;&#x76EE;&#x7ED3;&#x6784;" class="anchor-navigation-ex-anchor" href="#vue-&#x9879;&#x76EE;&#x7ED3;&#x6784;"><i class="fa fa-link" aria-hidden="true"></i></a>1.2. vue &#x9879;&#x76EE;&#x7ED3;&#x6784;</h2>
<pre><code class="lang-xml">build&#x76EE;&#x5F55;   &#x662F;&#x4E00;&#x4E9B;webpack&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x914D;&#x7F6E;&#x53C2;&#x6570;&#x4EC0;&#x4E48;&#x7684;&#xFF0C;&#x4E00;&#x822C;&#x4E0D;&#x7528;&#x52A8;
config&#x662F;vue&#x9879;&#x76EE;&#x7684;&#x57FA;&#x672C;&#x914D;&#x7F6E;&#x6587;&#x4EF6;
node_modules&#x662F;&#x9879;&#x76EE;&#x4E2D;&#x5B89;&#x88C5;&#x7684;&#x4F9D;&#x8D56;&#x6A21;&#x5757;
src  &#x6E90;&#x7801;&#x6587;&#x4EF6;&#x5939;&#xFF0C;&#x57FA;&#x672C;&#x4E0A;&#x6587;&#x4EF6;&#x90FD;&#x5E94;&#x8BE5;&#x653E;&#x5728;&#x8FD9;&#x91CC;&#x3002;
  &#x2014;assets &#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x5939;&#xFF0C;&#x91CC;&#x9762;&#x653E;&#x4E00;&#x4E9B;&#x9759;&#x6001;&#x8D44;&#x6E90;
  &#x2014;components  &#x8FD9;&#x91CC;&#x653E;&#x7684;&#x90FD;&#x662F;&#x5404;&#x4E2A;&#x7EC4;&#x4EF6;&#x6587;&#x4EF6;
  &#x2014;App.vue App.vue&#x7EC4;&#x4EF6;
  &#x2014;main.js&#x5165;&#x53E3;&#x6587;&#x4EF6;   , &#x5728;webpack&#x7684;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x91CC;&#xFF0C;&#x8BBE;&#x7F6E;&#x4E86;main.js&#x662F;&#x5165;&#x53E3;&#x6587;&#x4EF6;

static&#x751F;&#x6210;&#x597D;&#x7684;&#x6587;&#x4EF6;&#x4F1A;&#x653E;&#x5728;&#x8FD9;&#x4E2A;&#x76EE;&#x5F55;&#x4E0B;&#x3002;
.babelrc   babel&#x7F16;&#x8BD1;&#x53C2;&#x6570;&#xFF0C;vue&#x5F00;&#x53D1;&#x9700;&#x8981;babel&#x7F16;&#x8BD1;
.gitignore &#x7528;&#x6765;&#x8FC7;&#x6EE4;&#x4E00;&#x4E9B;&#x7248;&#x672C;&#x63A7;&#x5236;&#x7684;&#x6587;&#x4EF6;&#xFF0C;&#x6BD4;&#x5982;node_modules&#x6587;&#x4EF6;&#x5939;
index.html &#x4E3B;&#x9875;
package.json &#x9879;&#x76EE;&#x6587;&#x4EF6;&#xFF0C;&#x8BB0;&#x8F7D;&#x7740;&#x4E00;&#x4E9B;&#x547D;&#x4EE4;&#x548C;&#x4F9D;&#x8D56;&#x8FD8;&#x6709;&#x7B80;&#x8981;&#x7684;&#x9879;&#x76EE;&#x63CF;&#x8FF0;&#x4FE1;&#x606F;
</code></pre>
<p><br></p>
<h2 id="vue&#x751F;&#x547D;&#x5468;&#x671F;"><a name="vue&#x751F;&#x547D;&#x5468;&#x671F;" class="anchor-navigation-ex-anchor" href="#vue&#x751F;&#x547D;&#x5468;&#x671F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.3. vue&#x751F;&#x547D;&#x5468;&#x671F;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeCreate</td>
<td>&#x5728;&#x5B9E;&#x4F8B;&#x521D;&#x59CB;&#x5316;&#x4E4B;&#x540E;&#xFF0C;&#x6570;&#x636E;&#x89C2;&#x6D4B;&#x548C;&#x4E8B;&#x4EF6;&#x914D;&#x7F6E;&#x4E4B;&#x524D;&#x88AB;&#x8C03;&#x7528;&#x3002;</td>
</tr>
<tr>
<td>created</td>
<td>&#x5B9E;&#x4F8B;&#x5DF2;&#x7ECF;&#x521B;&#x5EFA;&#x5B8C;&#x6210;&#x4E4B;&#x540E;&#x88AB;&#x8C03;&#x7528;&#xFF0C;&#x5728;&#x8FD9;&#x4E00;&#x6B65;&#xFF0C;&#x5B9E;&#x4F8B;&#x5DF2;&#x7ECF;&#x5B8C;&#x6210;&#x6570;&#x636E;&#x89C2;&#x6D4B;&#xFF08;data&#xFF09;&#xFF0C;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;&#x7684;&#x8FD0;&#x7B97;&#xFF0C;&#x4F46;&#x662F;&#xFF0C;&#x8FD8;&#x6CA1;&#x6709;&#x548C;$el&#x6302;&#x8F7D;&#x3002;</td>
</tr>
<tr>
<td>beforeMount</td>
<td>&#x5728;&#x6302;&#x8F7D;&#x5F00;&#x59CB;&#x4E4B;&#x524D;&#x88AB;&#x8C03;&#x7528;&#xFF1A;&#x76F8;&#x5173;&#x7684; render &#x51FD;&#x6570;&#x9996;&#x6B21;&#x88AB;&#x8C03;&#x7528;&#x3002;</td>
</tr>
<tr>
<td>mounted</td>
<td>el &#x88AB;&#x65B0;&#x521B;&#x5EFA;&#x7684; vm.$el &#x66FF;&#x6362;&#xFF0C;&#x5E76;&#x6302;&#x8F7D;&#x5230;&#x5B9E;&#x4F8B;&#x4E0A;&#x53BB;&#x4E4B;&#x540E;&#x8C03;&#x7528;&#x8BE5;&#x94A9;&#x5B50;&#x3002;&#x5982;&#x679C; root &#x5B9E;&#x4F8B;&#x6302;&#x8F7D;&#x4E86;&#x4E00;&#x4E2A;&#x6587;&#x6863;&#x5185;&#x5143;&#x7D20;&#xFF0C;&#x5F53; mounted &#x88AB;&#x8C03;&#x7528;&#x65F6; vm.$el &#x4E5F;&#x5728;&#x6587;&#x6863;&#x5185;&#x3002;&#x8FD9;&#x4E2A;&#x4E5F;&#x662F;&#x6211;&#x4EEC;&#x4E3B;&#x8981;&#x8FD0;&#x7528;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x3002;</td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>&#x6570;&#x636E;&#x66F4;&#x65B0;&#x65F6;&#x8C03;&#x7528;&#xFF0C;&#x53D1;&#x751F;&#x5728;&#x865A;&#x62DF; DOM &#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x548C;&#x6253;&#x8865;&#x4E01;&#x4E4B;&#x524D;&#x3002; &#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x8FD9;&#x4E2A;&#x94A9;&#x5B50;&#x4E2D;&#x8FDB;&#x4E00;&#x6B65;&#x5730;&#x66F4;&#x6539;&#x72B6;&#x6001;&#xFF0C;&#x8FD9;&#x4E0D;&#x4F1A;&#x89E6;&#x53D1;&#x9644;&#x52A0;&#x7684;&#x91CD;&#x6E32;&#x67D3;&#x8FC7;&#x7A0B;&#x3002;</td>
</tr>
<tr>
<td>updated</td>
<td>&#x7531;&#x4E8E;&#x6570;&#x636E;&#x66F4;&#x6539;&#x5BFC;&#x81F4;&#x7684;&#x865A;&#x62DF; DOM &#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x548C;&#x6253;&#x8865;&#x4E01;&#xFF0C;&#x5728;&#x8FD9;&#x4E4B;&#x540E;&#x4F1A;&#x8C03;&#x7528;&#x8BE5;&#x94A9;&#x5B50;&#x3002;&#x5F53;&#x8FD9;&#x4E2A;&#x94A9;&#x5B50;&#x88AB;&#x8C03;&#x7528;&#x65F6;&#xFF0C;&#x7EC4;&#x4EF6; DOM &#x5DF2;&#x7ECF;&#x66F4;&#x65B0;&#xFF0C;&#x6240;&#x4EE5;&#x4F60;&#x73B0;&#x5728;&#x53EF;&#x4EE5;&#x6267;&#x884C;&#x4F9D;&#x8D56;&#x4E8E; DOM &#x7684;&#x64CD;&#x4F5C;&#x3002;&#x7136;&#x800C;&#x5728;&#x5927;&#x591A;&#x6570;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4F60;&#x5E94;&#x8BE5;&#x907F;&#x514D;&#x5728;&#x6B64;&#x671F;&#x95F4;&#x66F4;&#x6539;&#x72B6;&#x6001;&#xFF0C;&#x56E0;&#x4E3A;&#x8FD9;&#x53EF;&#x80FD;&#x4F1A;&#x5BFC;&#x81F4;&#x66F4;&#x65B0;&#x65E0;&#x9650;&#x5FAA;&#x73AF;&#x3002;</td>
</tr>
<tr>
<td>activated</td>
<td></td>
</tr>
<tr>
<td>deactivated</td>
<td></td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>&#x5B9E;&#x4F8B;&#x9500;&#x6BC1;&#x4E4B;&#x524D;&#x8C03;&#x7528;&#x3002;&#x5728;&#x8FD9;&#x4E00;&#x6B65;&#xFF0C;&#x5B9E;&#x4F8B;&#x4ECD;&#x7136;&#x5B8C;&#x5168;&#x53EF;&#x7528;&#x3002;</td>
</tr>
<tr>
<td>destroyed</td>
<td>&#x8C03;&#x7528;&#x540E;&#xFF0C;Vue &#x5B9E;&#x4F8B;&#x6307;&#x793A;&#x7684;&#x6240;&#x6709;&#x4E1C;&#x897F;&#x90FD;&#x4F1A;&#x89E3;&#x7ED1;&#x5B9A;&#xFF0C;&#x6240;&#x6709;&#x7684;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x5668;&#x4F1A;&#x88AB;&#x79FB;&#x9664;&#xFF0C;&#x6240;&#x6709;&#x7684;&#x5B50;&#x5B9E;&#x4F8B;&#x4E5F;&#x4F1A;&#x88AB;&#x9500;&#x6BC1;&#x3002;&#x8BE5;&#x94A9;&#x5B50;&#x5728;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x6E32;&#x67D3;&#x671F;&#x95F4;&#x4E0D;&#x88AB;&#x8C03;&#x7528;&#x3002;</td>
</tr>
<tr>
<td>errorCaptured</td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;"><a name="&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;" class="anchor-navigation-ex-anchor" href="#&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;"><i class="fa fa-link" aria-hidden="true"></i></a>1.4. &#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;</h2>
<p>Vue.js &#x4E3A; v-on &#x63D0;&#x4F9B;&#x4E86;&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;&#x6765;&#x5904;&#x7406; DOM &#x4E8B;&#x4EF6;&#x7EC6;&#x8282; &#x3002;</p>
<table>
<thead>
<tr>
<th>&#x7C7B;&#x578B;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>.stop</td>
<td>&#x963B;&#x6B62;&#x51FD;&#x6570;&#x7684;&#x4F20;&#x9012;</td>
<td>v-on:click.stop=&quot;doThis</td>
</tr>
<tr>
<td>.prevent</td>
<td>&#x963B;&#x6B62;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#xFF0C;&#x4F7F;&#x7528;&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x4F5C;</td>
<td>v-on:submit=&quot;doThis&quot;</td>
</tr>
<tr>
<td>.capture</td>
<td>&#x5148;&#x6267;&#x884C;&#x7236;&#x7EA7;&#x7684;&#x51FD;&#x6570;&#xFF0C;&#x518D;&#x6267;&#x884C;&#x5B50;&#x7EA7;&#x7684;&#x89E6;&#x53D1;&#x51FD;&#x6570;</td>
</tr>
<tr>
<td>.self</td>
<td>&#x53EA;&#x6267;&#x884C;&#x5B50;&#x7EA7;&#x672C;&#x8EAB;&#x7684;&#x51FD;&#x6570;</td>
</tr>
<tr>
<td>.once</td>
<td>&#x53EA;&#x4F1A;&#x89E6;&#x53D1;&#x4E00;&#x6B21;</td>
<td>v-on:click.once=&quot;doThis&quot;</td>
</tr>
<tr>
<td>.passive</td>
<td>&#x8BA9;&#x8BBE;&#x7F6E;&#x4E0D;&#x751F;&#x6548;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="&#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;"><a name="&#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;" class="anchor-navigation-ex-anchor" href="#&#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;"><i class="fa fa-link" aria-hidden="true"></i></a>1.5. &#x6309;&#x952E;&#x4FEE;&#x9970;&#x7B26;</h2>
<table>
<thead>
<tr>
<th>&#x7C7B;&#x578B;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>.enter</td>
<td></td>
</tr>
<tr>
<td>.tab</td>
<td></td>
</tr>
<tr>
<td>.delete</td>
<td>(&#x6355;&#x83B7;&#x201C;&#x5220;&#x9664;&#x201D;&#x548C;&#x201C;&#x9000;&#x683C;&#x201D;&#x952E;)</td>
</tr>
<tr>
<td>.esc</td>
<td></td>
</tr>
<tr>
<td>.space</td>
<td></td>
</tr>
<tr>
<td>.up</td>
<td></td>
</tr>
<tr>
<td>.down</td>
<td></td>
</tr>
<tr>
<td>.left</td>
<td></td>
</tr>
<tr>
<td>.right</td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;"><a name="vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;" class="anchor-navigation-ex-anchor" href="#vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;"><i class="fa fa-link" aria-hidden="true"></i></a>1.6. vue &#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>trim</td>
<td>&#x81EA;&#x52A8;&#x8FC7;&#x6EE4;&#x7528;&#x6237;&#x8F93;&#x5165;&#x7684;&#x9996;&#x5C3E;&#x7A7A;&#x683C;</td>
<td></td>
</tr>
<tr>
<td>lazy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="component-&#x7EC4;&#x4EF6;"><a name="component-&#x7EC4;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#component-&#x7EC4;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.7. component &#x7EC4;&#x4EF6;</h2>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>is</td>
<td>&#x6307;&#x5B9A;&#x54EA;&#x4E2A;&#x7EC4;&#x4EF6;&#x88AB;&#x6E32;&#x67D3;</td>
</tr>
<tr>
<td>inline-template</td>
<td>&#x5185;&#x8054;&#x6A21;&#x677F;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="slot-&#x7EC4;&#x4EF6;"><a name="slot-&#x7EC4;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#slot-&#x7EC4;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.8. slot &#x7EC4;&#x4EF6;</h2>
<p>&#x5F53;&#x6211;&#x4EEC;&#x8C03;&#x7528;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x5565;&#x90FD;&#x4E0D;&#x4F20;&#x65F6;&#xFF0C;&#x663E;&#x793A;&#x6211;&#x4EEC;&#x5B9A;&#x4E49;&#x7684;&#x9ED8;&#x8BA4;&#x6A21;&#x677F;&#xFF0C;&#x5F53;&#x6211;&#x4EEC;&#x4F20;&#x4E86;&#x81EA;&#x5B9A;&#x4E49;&#x6A21;&#x677F;&#x65F6;&#xFF0C;&#x5C31;&#x5E94;&#x8BE5;&#x4F7F;&#x7528;&#x6211;&#x4EEC;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x6A21;&#x677F;&#xFF0C;&#x6765;&#x66FF;&#x6362;&#x9ED8;&#x8BA4;&#x6A21;&#x677F;&#x3002;
slot&#x5C31;&#x662F;&#x5B9E;&#x73B0;&#x8FD9;&#x4E2A;&#x529F;&#x80FD;&#x3002;</p>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#x5F53;&#x7236;&#x7EC4;&#x4EF6;&#x8C03;&#x7528;&#x6211;&#x65F6;&#xFF0C;&#x6CA1;&#x6709;&#x4F20;&#x81EA;&#x5B9A;&#x4E49;&#x5185;&#x5BB9;&#x65F6;&#xFF0C;&#x6211;&#x5C31;&#x4F1A;&#x663E;&#x793A;&#x4E86;&#xFF0C;&#x5982;&#x679C;&#x4F20;&#x4E86;&#x81EA;&#x5B9A;&#x4E49;&#x5185;&#x5BB9;&#xFF0C;&#x6211;&#x5C31;&#x4E0D;&#x663E;&#x793A;&#x4E86;&#x3002;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
</code></pre>
<p><br></p>
<h2 id="keep-alive-&#x7EC4;&#x4EF6;"><a name="keep-alive-&#x7EC4;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#keep-alive-&#x7EC4;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.9. keep-alive &#x7EC4;&#x4EF6;</h2>
<p>&#x5305;&#x88F9;&#x52A8;&#x6001;&#x7EC4;&#x4EF6;&#x65F6;&#xFF0C;&#x4F1A;&#x7F13;&#x5B58;&#x4E0D;&#x6D3B;&#x52A8;&#x7684;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x9500;&#x6BC1;&#x5B83;&#x4EEC;&#x3002;</p>
<table>
<thead>
<tr>
<th>&#x5C5E;&#x6027;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>include</td>
<td>&#x6307;&#x5B9A;&#x9700;&#x5440;&#x7F13;&#x5B58;&#x7684;&#x7EC4;&#x4EF6;</td>
</tr>
<tr>
<td>exclude</td>
<td>&#x4E0D;&#x7F13;&#x5B58;&#x6307;&#x5B9A;&#x7684;&#x7EC4;&#x4EF6;</td>
</tr>
<tr>
<td>max</td>
<td>&#x6700;&#x591A;&#x53EF;&#x4EE5;&#x7F13;&#x5B58;&#x591A;&#x5C11;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition"><a name="vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition" class="anchor-navigation-ex-anchor" href="#vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition"><i class="fa fa-link" aria-hidden="true"></i></a>1.10. vue &#x52A8;&#x753B;&#x7EC4;&#x4EF6; transition</h2>
<p>&#x53EA;&#x4F1A;&#x628A;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x5E94;&#x7528;&#x5230;&#x5176;&#x5305;&#x88F9;&#x7684;&#x5185;&#x5BB9;&#x4E0A;&#xFF0C;&#x800C;&#x4E0D;&#x4F1A;&#x989D;&#x5916;&#x6E32;&#x67D3; DOM &#x5143;&#x7D20; &#x3002;</p>
<table>
<thead>
<tr>
<th>transition &#x5C5E;&#x6027;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>&#x7528;&#x4E8E;&#x81EA;&#x52A8;&#x751F;&#x6210; CSS &#x8FC7;&#x6E21;&#x7C7B;&#x540D;&#x3002; <br> &#x4F8B;&#x5982;&#xFF1A;name: &apos;fade&apos; &#x5C06;&#x81EA;&#x52A8;&#x62D3;&#x5C55;&#x4E3A;.fade-enter&#xFF0C;.fade-enter-active&#x7B49;&#x3002;&#x9ED8;&#x8BA4;&#x7C7B;&#x540D;&#x4E3A; &quot;v&quot;</td>
</tr>
<tr>
<td>mode</td>
<td>&#x63A7;&#x5236;&#x79BB;&#x5F00;/&#x8FDB;&#x5165;&#x7684;&#x8FC7;&#x6E21;&#x65F6;&#x95F4;&#x5E8F;&#x5217;&#x3002;&#x6709;&#x6548;&#x7684;&#x6A21;&#x5F0F;&#x6709; &quot;out-in&quot; &#x548C; &quot;in-out&quot;&#xFF1B;&#x9ED8;&#x8BA4;&#x540C;&#x65F6;&#x751F;&#x6548;&#x3002;</td>
</tr>
<tr>
<td>appear</td>
<td>&#x662F;&#x5426;&#x5728;&#x521D;&#x59CB;&#x6E32;&#x67D3;&#x65F6;&#x4F7F;&#x7528;&#x8FC7;&#x6E21;&#x3002;&#x9ED8;&#x8BA4;&#x4E3A; false&#x3002;</td>
</tr>
<tr>
<td>css</td>
<td>&#x662F;&#x5426;&#x4F7F;&#x7528; CSS &#x8FC7;&#x6E21;&#x7C7B;&#x3002;&#x9ED8;&#x8BA4;&#x4E3A; true&#x3002;&#x5982;&#x679C;&#x8BBE;&#x7F6E;&#x4E3A; false&#xFF0C;&#x5C06;&#x53EA;&#x901A;&#x8FC7;&#x7EC4;&#x4EF6;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x6CE8;&#x518C;&#x7684; JavaScript &#x94A9;&#x5B50;&#x3002;</td>
</tr>
<tr>
<td>type</td>
<td>&#x6307;&#x5B9A;&#x8FC7;&#x6E21;&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;&#xFF0C;&#x4FA6;&#x542C;&#x8FC7;&#x6E21;&#x4F55;&#x65F6;&#x7ED3;&#x675F;&#x3002;&#x6709;&#x6548;&#x503C;&#x4E3A; &quot;transition&quot; &#x548C; &quot;animation&quot;&#x3002;&#x9ED8;&#x8BA4; Vue.js &#x5C06;&#x81EA;&#x52A8;&#x68C0;&#x6D4B;&#x51FA;&#x6301;&#x7EED;&#x65F6;&#x95F4;&#x957F;&#x7684;&#x4E3A;&#x8FC7;&#x6E21;&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;&#x3002;</td>
</tr>
<tr>
<td>enter-class</td>
<td>&#x6307;&#x5B9A;&#x81EA;&#x5B9A;&#x4E49;&#x7684;css&#x8FC7;&#x6E21;&#x7C7B;&#x540D;&#x3002; &#x6CA1;&#x6709;&#x6307;&#x5B9A;&#x5C31;&#x4F1A;&#x7528;&#x81EA;&#x52A8;&#x751F;&#x6210;&#x6216;&#x9ED8;&#x8BA4;&#x7684;&#x7C7B;&#x540D;</td>
</tr>
<tr>
<td>leave-class</td>
<td></td>
</tr>
<tr>
<td>appear-class</td>
<td></td>
</tr>
<tr>
<td>enter-to-class</td>
<td></td>
</tr>
<tr>
<td>leave-to-class</td>
<td></td>
</tr>
<tr>
<td>appear-to-class</td>
<td></td>
</tr>
<tr>
<td>enter-active-class</td>
<td></td>
</tr>
<tr>
<td>leave-active-class</td>
<td></td>
</tr>
<tr>
<td>appear-active-class</td>
<td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>transition &#x4E8B;&#x4EF6;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>before-enter</td>
<td></td>
</tr>
<tr>
<td>before-leave</td>
<td></td>
</tr>
<tr>
<td>before-appear</td>
<td></td>
</tr>
<tr>
<td>enter</td>
<td></td>
</tr>
<tr>
<td>leave</td>
<td></td>
</tr>
<tr>
<td>appear</td>
<td></td>
</tr>
<tr>
<td>after-enter</td>
<td></td>
</tr>
<tr>
<td>after-leave</td>
<td></td>
</tr>
<tr>
<td>after-appear</td>
<td></td>
</tr>
<tr>
<td>enter-cancelled</td>
<td></td>
</tr>
<tr>
<td>leave-cancelled (v-show only)</td>
<td></td>
</tr>
<tr>
<td>appear-cancelled</td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition-group"><a name="vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition-group" class="anchor-navigation-ex-anchor" href="#vue-&#x52A8;&#x753B;&#x7EC4;&#x4EF6;-transition-group"><i class="fa fa-link" aria-hidden="true"></i></a>1.11. vue &#x52A8;&#x753B;&#x7EC4;&#x4EF6; transition-group</h2>
<p>&#x4E3A;&#x591A;&#x4E2A;&#x5143;&#x7D20;/&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x3002;
transition-group &#x5C5E;&#x6027; | &#x8BF4;&#x660E;
-|-
tag | &#x9ED8;&#x8BA4;&#x6E32;&#x67D3; <span>&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7; tag &#x5C5E;&#x6027;&#x914D;&#x7F6E;&#x54EA;&#x4E2A;&#x5143;&#x7D20;&#x5E94;&#x8BE5;&#x88AB;&#x6E32;&#x67D3;&#x3002;</span></p>
<p><br></p>
<h2 id="&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E;-&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;"><a name="&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E;-&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;" class="anchor-navigation-ex-anchor" href="#&#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E;-&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;"><i class="fa fa-link" aria-hidden="true"></i></a>1.12. &#x5B9E;&#x4F8B;&#x5C5E;&#x6027;&#x3001;&#x65B9;&#x6CD5;&#x3001;&#x6570;&#x636E; &#x3001;&#x751F;&#x547D;&#x5468;&#x671F;</h2>
<table>
<thead>
<tr>
<th>&#x79CD;&#x7C7B;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>vm.$data</td>
<td></td>
</tr>
<tr>
<td>vm.$props</td>
<td></td>
</tr>
<tr>
<td>vm.$el</td>
<td></td>
</tr>
<tr>
<td>vm.$options</td>
<td></td>
</tr>
<tr>
<td>vm.$parent</td>
<td></td>
</tr>
<tr>
<td>vm.$root</td>
<td></td>
</tr>
<tr>
<td>vm.$children</td>
<td></td>
</tr>
<tr>
<td>vm.$slots</td>
<td></td>
</tr>
<tr>
<td>vm.$scopedSlots</td>
<td></td>
</tr>
<tr>
<td>vm.$scopedSlots</td>
<td></td>
</tr>
<tr>
<td>vm.$isServer</td>
<td></td>
</tr>
<tr>
<td>vm.$attrs</td>
<td></td>
</tr>
<tr>
<td>vm.$listeners</td>
<td></td>
</tr>
<tr>
<td>vm.$watch</td>
<td></td>
</tr>
<tr>
<td>vm.$watch</td>
<td></td>
</tr>
<tr>
<td>vm.$delete</td>
<td></td>
</tr>
<tr>
<td>vm.$on</td>
<td></td>
</tr>
<tr>
<td>vm.$once</td>
<td></td>
</tr>
<tr>
<td>vm.$off</td>
<td></td>
</tr>
<tr>
<td>vm.$emit</td>
<td></td>
</tr>
<tr>
<td>vm.$mount</td>
<td></td>
</tr>
<tr>
<td>vm.$forceUpdate</td>
<td></td>
</tr>
<tr>
<td>vm.$forceUpdate</td>
<td></td>
</tr>
<tr>
<td>vm.$destroy</td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue-&#x5168;&#x5C40;&#x914D;&#x7F6E;"><a name="vue-&#x5168;&#x5C40;&#x914D;&#x7F6E;" class="anchor-navigation-ex-anchor" href="#vue-&#x5168;&#x5C40;&#x914D;&#x7F6E;"><i class="fa fa-link" aria-hidden="true"></i></a>1.13. vue &#x5168;&#x5C40;&#x914D;&#x7F6E;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vue.config.silent</td>
<td>&#x662F;&#x5426;&#x53D6;&#x6D88; Vue &#x6240;&#x6709;&#x7684;&#x65E5;&#x5FD7;&#x4E0E;&#x8B66;&#x544A;&#x3002;</td>
</tr>
<tr>
<td>Vue.config.optionMergeStrategies</td>
<td></td>
</tr>
<tr>
<td>Vue.config.devtools</td>
<td></td>
</tr>
<tr>
<td>Vue.config.errorHandler</td>
<td></td>
</tr>
<tr>
<td>Vue.config.warnHandler</td>
<td></td>
</tr>
<tr>
<td>Vue.config.ignoredElements</td>
<td></td>
</tr>
<tr>
<td>Vue.config.keyCodes</td>
<td></td>
</tr>
<tr>
<td>Vue.config.performance</td>
<td></td>
</tr>
<tr>
<td>Vue.config.productionTip</td>
<td>&#x8BBE;&#x7F6E;&#x4E3A; false &#x4EE5;&#x963B;&#x6B62; vue &#x5728;&#x542F;&#x52A8;&#x65F6;&#x751F;&#x6210;&#x751F;&#x4EA7;&#x63D0;&#x793A;&#x3002;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue&#x7684;&#x5168;&#x5C40;api"><a name="vue&#x7684;&#x5168;&#x5C40;api" class="anchor-navigation-ex-anchor" href="#vue&#x7684;&#x5168;&#x5C40;api"><i class="fa fa-link" aria-hidden="true"></i></a>1.14. vue&#x7684;&#x5168;&#x5C40;api</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vue.directive</td>
<td>&#x7528;&#x6765;&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4;</td>
</tr>
<tr>
<td>Vue.extend</td>
<td>vue &#x6784;&#x9020;&#x5668;&#x62D3;&#x5C55; &#xFF0C;&#x8FD4;&#x56DE;&#x7684;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x6784;&#x9020;&#x5668;</td>
</tr>
<tr>
<td>Vue.set</td>
<td>&#x52A8;&#x6001;&#x589E;&#x52A0;&#x6216;&#x4FEE;&#x6539;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x6307;&#x5B9A;&#x5C5E;&#x6027;&#x7684;&#x503C;</td>
</tr>
<tr>
<td>Vue.delete</td>
<td></td>
</tr>
<tr>
<td>Vue.component</td>
<td>&#x6CE8;&#x518C;&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;</td>
</tr>
<tr>
<td>Vue.config.delimiters</td>
<td>&#x4FEE;&#x6539;&#x6587;&#x672C;&#x63D2;&#x503C;&#x7684;&#x5B9A;&#x754C;&#x7B26;</td>
</tr>
<tr>
<td>Vue.config.unsafeDelimiters</td>
<td>2.0&#x5DF2;&#x7ECF;&#x5E9F;&#x9664;</td>
</tr>
<tr>
<td>Vue.nextTick</td>
<td></td>
</tr>
<tr>
<td>Vue.delete</td>
<td></td>
</tr>
<tr>
<td>Vue.delete</td>
<td></td>
</tr>
<tr>
<td>Vue.delete</td>
<td></td>
</tr>
<tr>
<td>Vue.compile</td>
<td></td>
</tr>
<tr>
<td>Vue.version</td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;"><a name="vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;" class="anchor-navigation-ex-anchor" href="#vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.15. vue&#x7684;&#x7279;&#x6B8A;&#x7279;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x79CD;&#x7C7B;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>:key</td>
<td></td>
</tr>
<tr>
<td>ref</td>
<td></td>
</tr>
<tr>
<td>slot-scope</td>
<td></td>
</tr>
<tr>
<td>scope</td>
<td>&#x5728; 2.5.0+ &#x4E2D;&#x88AB; slot-scope &#x66FF;&#x4EE3;&#x3002;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;_1"><a name="vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;_1" class="anchor-navigation-ex-anchor" href="#vue-&#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;_1"><i class="fa fa-link" aria-hidden="true"></i></a>1.16. vue &#x8868;&#x5355;&#x4FEE;&#x9970;&#x7B26;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>number</td>
<td></td>
<td></td>
</tr>
<tr>
<td>trim</td>
<td>&#x81EA;&#x52A8;&#x8FC7;&#x6EE4;&#x7528;&#x6237;&#x8F93;&#x5165;&#x7684;&#x9996;&#x5C3E;&#x7A7A;&#x683C;</td>
<td></td>
</tr>
<tr>
<td>lazy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue&#x6307;&#x4EE4;"><a name="vue&#x6307;&#x4EE4;" class="anchor-navigation-ex-anchor" href="#vue&#x6307;&#x4EE4;"><i class="fa fa-link" aria-hidden="true"></i></a>1.17. vue&#x6307;&#x4EE4;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>v-bind</td>
<td>&#x7528;&#x4E8E;&#x66F4;&#x65B0;HTML&#x7684;&#x5C5E;&#x6027;&#x503C;</td>
<td>v-bind:href  //&#x7B80;&#x5199; :href   <br>  v-bind:src  <br>   //&#x7ED1;&#x5B9A;class&#x5C5E;&#x6027; &#xFF0C;&#x6570;&#x636E;&#x53EF;&#x4EE5;&#x662F;&#x5B57;&#x7B26;&#x4E32; &#x3001;&#x6570;&#x7EC4;&#x3001;&#x5BF9;&#x8C61;    <br>  v-bind:class    <br>    v-bind:style</td>
</tr>
<tr>
<td>v-on</td>
<td>&#x7528;&#x4E8E; &#x76D1;&#x542C;DOM&#x4E8B;&#x4EF6;</td>
<td>v-on:click   // &#x7B80;&#x5199; @click</td>
</tr>
<tr>
<td>v-show</td>
<td>&#x663E;&#x793A;&#x6216;&#x9690;&#x85CF;</td>
<td>//isShow &#x662F;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x4E00;&#x4E2A;&#x53D8;&#x91CF; <br> v-show=&quot;isShow&quot;</td>
</tr>
<tr>
<td>v-if</td>
<td></td>
<td></td>
</tr>
<tr>
<td>v-else</td>
<td></td>
<td></td>
</tr>
<tr>
<td>v-else-if</td>
<td></td>
<td></td>
</tr>
<tr>
<td>v-for</td>
<td>v-for=&quot; (item ,  index ) in tables&quot;  <br>   -</td>
<td>1.0&#x4EE5;&#x524D;&#x53EF;&#x4EE5;&#x7528; v-repeat</td>
</tr>
<tr>
<td>v-model</td>
<td>&#x53CC;&#x5411;&#x7ED1;&#x5B9A;</td>
<td></td>
</tr>
<tr>
<td>v-html</td>
<td>v-html=&quot;content&quot;</td>
<td>&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x5BF9;&#x5185;&#x5BB9;&#x8FDB;&#x884C;HTML&#x89E3;&#x6790;</td>
</tr>
<tr>
<td>v-text</td>
<td>v-text = &apos;testData&apos;</td>
<td>&#x4EC5;&#x4EC5;&#x53EA;&#x662F;&#x663E;&#x793A; <br>   { { } }&#x662F;v-text&#x7684;&#x7B80;&#x5199;&#x5F62;&#x5F0F;</td>
</tr>
<tr>
<td>v-once</td>
<td>&#x6307;&#x660E;&#x53EA;&#x8FDB;&#x884C;&#x4E00;&#x6B21;</td>
<td></td>
</tr>
<tr>
<td>v-pre</td>
<td>&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x8DF3;&#x8FC7;vue&#x7684;&#x7F16;&#x8BD1;&#xFF0C;&#x76F4;&#x63A5;&#x8F93;&#x51FA;&#x539F;&#x59CB;&#x503C;</td>
<td></td>
</tr>
<tr>
<td>v-cloak</td>
<td>&#x9632;&#x6B62;&#x9875;&#x9762;&#x52A0;&#x8F7D;&#x65F6;&#x51FA;&#x73B0; &#x53D8;&#x91CF;&#x540D;</td>
<td>&#x4F8B;&#x5982;&#x9632;&#x6B62;&#x51FA;&#x73B0; &#x8FD9;&#x79CD;&#x60C5;&#x51B5;    </td>
</tr>
<tr>
<td>track-by</td>
<td>&#x65E0;track-by&#xFF1A;&#x6570;&#x636E;&#x4FEE;&#x6539;&#x65F6;(&#x65E0;&#x8BBA;&#x662F;&#x5426;&#x76F8;&#x540C;)&#xFF0C;&#x90FD;&#x4F1A;&#x88AB;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x3002;  <br>  &#x52A0;&#x5165;track-by&#x5C5E;&#x6027;&#xFF1A;&#x6570;&#x636E;&#x4FEE;&#x6539;&#x65F6;&#xFF0C;&#x4E0D;&#x53D8;&#x6570;&#x636E;&#x6240;&#x5728;&#x7684;dom&#x4E0D;&#x88AB;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF0C;&#x5DF2;&#x6539;&#x53D8;&#x7684;&#x6570;&#x636E;&#x6240;&#x5728;dom&#x624D;&#x88AB;&#x91CD;&#x65B0;&#x6E32;&#x67D3; &#x3002;</td>
<td>track-by=&quot;$index&quot;</td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="vue&#x5B9E;&#x4F8B;&#x7684;-&#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;"><a name="vue&#x5B9E;&#x4F8B;&#x7684;-&#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;" class="anchor-navigation-ex-anchor" href="#vue&#x5B9E;&#x4F8B;&#x7684;-&#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;"><i class="fa fa-link" aria-hidden="true"></i></a>1.18. vue&#x5B9E;&#x4F8B;&#x7684; &#x9009;&#x9879;&#x3001;&#x5C5E;&#x6027;</h2>
<table>
<thead>
<tr>
<th>&#x540D;&#x5B57;</th>
<th>&#x8BF4;&#x660E;</th>
<th>&#x5176;&#x4ED6;</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>&#x4FBF;&#x4E8E;&#x8C03;&#x8BD5; ,&#x6709;&#x540D;&#x5B57;&#x7684;&#x7EC4;&#x4EF6;&#x6709;&#x66F4;&#x53CB;&#x597D;&#x7684;&#x8B66;&#x544A;&#x4FE1;&#x606F;&#x3002;</td>
<td></td>
</tr>
<tr>
<td>el</td>
<td>&#x6307;&#x5B9A;vue&#x7684;&#x6302;&#x8F7D;&#x76EE;&#x6807; &#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;Vue&#x7ED1;&#x5B9A;&#x6570;&#x636E;&#x5230;&#x54EA;&#x91CC;&#x53BB;&#x627E;&#x3002; <br> &#x5728;&#x5B9E;&#x4F8B;&#x6302;&#x8F7D;&#x4E4B;&#x540E;,&#x5143;&#x7D20;&#x4F1A;&#x901A;&#x8FC7; vue&#x5B9E;&#x4F8B;.$el&#x8BBF;&#x95EE;&#x3002; &#x6307;&#x5B9A;&#x89C6;&#x56FE;&#x3002;</td>
<td></td>
</tr>
<tr>
<td>data</td>
<td>&#x7528;&#x6765;&#x6307;&#x5B9A;&#x3001;&#x521D;&#x59CB;&#x5316;&#x53D8;&#x91CF;&#x7684;&#x3002; vue&#x4F1A;&#x81EA;&#x52A8;&#x76D1;&#x6D4B;data&#x91CC;&#x9762;&#x7684;&#x6570;&#x636E; &#x3002;</td>
<td></td>
</tr>
<tr>
<td>ref</td>
<td>&#x4E3A;&#x4E86;&#x5176;&#x4ED6;&#x5730;&#x65B9;&#x65B9;&#x4FBF;&#x627E;&#x5230;&#x8FD9;&#x4E2A;&#x56FE;&#x5C42;</td>
<td>ref=&apos;can&apos;  &#xFF0C;   this.$refs.can.appendChild( container )</td>
<td></td>
</tr>
<tr>
<td>computed</td>
<td>&#x8BA1;&#x7B97;&#x5C5E;&#x6027; &#xFF0C;&#x7528;&#x6765;&#x5305;&#x542B; &quot;&#x952E;-&#x51FD;&#x6570;&quot; &#xFF0C; &#x4E00;&#x4E9B;&#x503C;&#x5982;&#x679C;&#x9700;&#x8981;&#x590D;&#x6742;&#x7684;&#x903B;&#x8F91;&#xFF0C;&#x90FD;&#x5728;&#x8FD9;&#x91CC;&#x9762;&#x5B8C;&#x6210;</td>
<td></td>
</tr>
<tr>
<td>methods</td>
<td>&#x8BA1;&#x7B97;&#x5C5E;&#x6027; &#xFF0C; &#x5305;&#x542B;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x65B9;&#x6CD5; &#x3002;&#x6548;&#x679C;&#x8DDF; computed&#x4E00;&#x6837; &#xFF0C;&#x6027;&#x80FD;&#x4E0D;&#x5982; computed</td>
<td></td>
</tr>
<tr>
<td>watch</td>
<td>&#x76D1;&#x542C;&#x5C5E;&#x6027;  , &#x76D1;&#x6D4B;&#x53D8;&#x91CF;&#x7684;&#x53D8;&#x5316;&#xFF0C;&#x5E76;&#x6267;&#x884C;&#x5BF9;&#x5E94;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</td>
<td></td>
</tr>
<tr>
<td>template</td>
<td>&#x6307;&#x5B9A;&#x4F7F;&#x7528;&#x7684;&#x6A21;&#x677F;</td>
<td></td>
</tr>
<tr>
<td>router</td>
<td>&#x6307;&#x5B9A;&#x8DEF;&#x7531;</td>
<td></td>
</tr>
<tr>
<td>props</td>
<td>&#x7528;&#x4E8E;&#x63A5;&#x6536;&#x6765;&#x81EA;&#x7236;&#x7EC4;&#x4EF6;&#x7684;&#x6570;&#x636E;</td>
<td></td>
</tr>
<tr>
<td>propsData</td>
<td>&#x521B;&#x5EFA;&#x5B9E;&#x4F8B;&#x65F6;&#x4F20;&#x9012; props&#x3002;&#x4E3B;&#x8981;&#x4F5C;&#x7528;&#x662F;&#x65B9;&#x4FBF;&#x6D4B;&#x8BD5;&#x3002;</td>
<td></td>
</tr>
<tr>
<td>render</td>
<td>&#x5B57;&#x7B26;&#x4E32;&#x6A21;&#x677F;&#x7684;&#x4EE3;&#x66FF;&#x65B9;&#x6848;</td>
<td></td>
</tr>
<tr>
<td>renderError</td>
<td>&#x53EA;&#x5728;&#x5F00;&#x53D1;&#x8005;&#x73AF;&#x5883;&#x4E0B;&#x5DE5;&#x4F5C;&#x3002;</td>
<td></td>
</tr>
<tr>
<td>directives</td>
<td></td>
<td></td>
</tr>
<tr>
<td>filters</td>
<td>&#x8FC7;&#x6EE4;&#x5668; &#xFF0C;  { { msg | aaa } }   //&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x662F;&#x9700;&#x8981;&#x8FC7;&#x6EE4;&#x7684;&#x5185;&#x5BB9; &#xFF0C; &#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x662F; &#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x8FC7;&#x6EE4;&#x5668;</td>
</tr>
<tr>
<td>components</td>
<td>&#x6307;&#x5B9A;&#x4F7F;&#x7528;&#x7684;&#x7EC4;&#x4EF6;</td>
<td></td>
</tr>
<tr>
<td>parent</td>
<td>&#x6307;&#x5B9A;&#x5DF2;&#x521B;&#x5EFA;&#x7684;&#x5B9E;&#x4F8B;&#x4E4B;&#x7236;&#x5B9E;&#x4F8B;&#xFF0C;&#x5728;&#x4E24;&#x8005;&#x4E4B;&#x95F4;&#x5EFA;&#x7ACB;&#x7236;&#x5B50;&#x5173;&#x7CFB;&#x3002;</td>
<td></td>
</tr>
<tr>
<td>mixins</td>
<td></td>
<td></td>
</tr>
<tr>
<td>provide</td>
<td></td>
<td></td>
</tr>
<tr>
<td>inject</td>
<td></td>
<td></td>
</tr>
<tr>
<td>delimiters</td>
<td></td>
<td></td>
</tr>
<tr>
<td>functional</td>
<td></td>
<td></td>
</tr>
<tr>
<td>model</td>
<td></td>
<td></td>
</tr>
<tr>
<td>inheritAttrs</td>
<td></td>
<td></td>
</tr>
<tr>
<td>comments</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p><br></p>
<h2 id="hello-vue"><a name="hello-vue" class="anchor-navigation-ex-anchor" href="#hello-vue"><i class="fa fa-link" aria-hidden="true"></i></a>1.19. hello vue</h2>
<p>&#x8FD9;&#x662F;&#x521B;&#x5EFA;vue&#x9879;&#x76EE;&#x540E;&#x81EA;&#x52A8;&#x751F;&#x6210;&#x7684;&#x4EE3;&#x7801;&#xFF08;&#x6709;&#x5220;&#x51CF;&#xFF09;&#xFF0C;
&#x4E3A;&#x4E86;&#x4E86;&#x89E3;&#x6700;&#x57FA;&#x672C;&#x7684;vue&#x610F;&#x601D;&#x3002;</p>
<pre><code class="lang-html">// index.html
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
  //&#x6240;&#x6709;&#x7684;&#x6700;&#x540E;&#x90FD;&#x4F1A;&#x6E32;&#x67D3;&#x5230;&#x8FD9;&#x91CC;&#x9762;&#x6765;
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app123&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>

// main.js
/* &#x5C06;App.vue&#x5BFC;&#x5165;&#x6765;&#xFF0C;&#x5E76;&#x5C06;&#x540D;&#x5B57;&#x8BBE;&#x7F6E;&#x4E3A;App11 */
import App11 from &apos;./App&apos;
import router22 from &apos;./router/index&apos;

/* &#x662F;&#x5426;&#x63D0;&#x793A;&#x76F8;&#x5173;&#x4FE1;&#x606F;&#xFF0C;&#x6CA1;&#x770B;&#x5230;&#x6548;&#x679C; */
Vue.config.productionTip = true
/* eslint-disable no-new */
new Vue({
  /* &#x8FD9;&#x4E2A;id&#x662F;&#x5728;index.html&#x4E2D;&#x5B9A;&#x4E49; */
  el: &apos;#app123&apos;,
  router: router22,
  components: { App11 },
  /* &#x5C06;App11&#x4F5C;&#x4E3A;&#x6E32;&#x67D3;&#x6A21;&#x677F; &#xFF0C; &#x90FD;&#x6E32;&#x67D3;&#x5230; App11&#x4E2D;&#x53BB;&#xFF1F;  &#x6700;&#x540E;App11 + vue&#x7ED1;&#x5B9A;&#x540E; &#x518D;&#x6E32;&#x67D3;&#x5230;index.html&#x4E2D;&#x7684; app123&#x53BB; &#xFF1F; */
  template: &apos;<span class="hljs-tag">&lt;<span class="hljs-name">App11</span>/&gt;</span>&apos;
})


//App.vue
<span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;div222&quot;</span>&gt;</span>
    <span class="hljs-comment">&lt;!--&#x4E0D;&#x88AB;&#x8DEF;&#x7531;&#x63A7;&#x5236;&#x7684;&#x90E8;&#x5206;--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./assets/logo.png&quot;</span>&gt;</span>
    <span class="hljs-comment">&lt;!--&#x8DEF;&#x7531;&#x5230;&#x7684;&#x89C6;&#x56FE;&#x4F1A;&#x88AB;&#x6E32;&#x67D3;&#x5230; &#x8FD9;&#x91CC;--&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>/&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
<span class="hljs-selector-id">#div222</span> {
  <span class="hljs-attribute">-moz-osx-font-smoothing</span>: grayscale;
  <span class="hljs-attribute">text-align</span>: center;
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

//HelloWorld.vue
<span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;hello100&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
      &#x767E;&#x5EA6;
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-comment">/** &#x4EE5;&#x4E0B;&#x8FD9;&#x4E9B;&#x90FD;&#x53EF;&#x5199;&#x53EF;&#x4E0D;&#x5199; &#xFF0C;&#x5199;&#x4E86;&#x662F;&#x4E3A;&#x4E86;&#x66F4;&#x597D;&#x5730;&#x8C03;&#x8BD5; */</span>
  name: <span class="hljs-string">&apos;HelloWorld888&apos;</span>,
  name33: <span class="hljs-string">&apos;HelloWorld888&apos;</span>,
  data () {
    <span class="hljs-keyword">return</span> {
      testData: <span class="hljs-string">&apos;hello world&apos;</span>
    }
  }
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css">
<span class="hljs-selector-tag">h1</span> {
  <span class="hljs-attribute">font-weight</span>: normal;
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>

// index.js
import Vue from &apos;vue&apos;
import Router234 from &apos;vue-router&apos;
import HelloWorld111 from &apos;@/components/HelloWorld&apos;

/* &#x5C06; Router &#x4F5C;&#x4E3A;vue&#x7684;&#x8DEF;&#x7531; */
Vue.use(Router234)

export default new Router234({
  routes: [
    {
      path: &apos;/&apos;,
      /* &#x7ED9;&#x5F53;&#x524D;&#x8DEF;&#x5F84;&#x8D77;&#x7684;&#x53E6;&#x4E00;&#x4E2A;&#x540D;&#x5B57; &#xFF0C;&#x968F;&#x4FBF;&#x5199; */
      name: &apos;HelloWorld3335&apos;,
      /* &#x540D;&#x5B57;&#x5FC5;&#x987B;&#x8DDF;import&#x4E2D;&#x547D;&#x540D;&#x7684;&#x4E00;&#x6837; */
      component: HelloWorld111
    }
  ]
})
</code></pre>
<p><br></p>
<h2 id="&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;"><a name="&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a>1.20. &#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;</h2>
<pre><code class="lang-xml">//&#x5BFC;&#x5165;
import Navbar from &apos;./Navbar.vue&apos;
import MiddleLay from &apos;./Middle.vue&apos;
import Sidebar from &apos;./components/Sidebar/Sidebar.vue&apos;
// &#x6CE8;&#x518C;
components: {
  // &#x5934;&#x90E8;&#x5BFC;&#x822A;&#x680F;
  Navbar,
  // &#x5DE6;&#x4FA7; &#x5BFC;&#x822A;
  Sidebar,
  // &#x4E3B;&#x754C;&#x9762;
  MiddleLay
},

// &#x4F7F;&#x7528;
<span class="hljs-tag">&lt;<span class="hljs-name">sidebar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;sidebar-container&quot;</span>/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main-container&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">Navbar</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">MiddleLay</span>/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<p><br></p>
<h2 id="&#x5176;&#x4ED6;&#x7EC6;&#x8282;"><a name="&#x5176;&#x4ED6;&#x7EC6;&#x8282;" class="anchor-navigation-ex-anchor" href="#&#x5176;&#x4ED6;&#x7EC6;&#x8282;"><i class="fa fa-link" aria-hidden="true"></i></a>1.21. &#x5176;&#x4ED6;&#x7EC6;&#x8282;</h2>
<pre><code class="lang-xml">render: h =&gt; h(App)
&#x5C31;&#x662F;&#x4E0B;&#x9762;&#x8FD9;&#x4E9B;&#x4EE3;&#x7801;&#x7684;&#x7B80;&#x5199;&#xFF0C;&#x6CE8;&#xFF1A;&#xFF08;h &#x4F5C;&#x4E3A; createElement &#x7684;&#x522B;&#x540D;&#x662F; Vue &#x751F;&#x6001;&#x7CFB;&#x7EDF;&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x901A;&#x7528;&#x60EF;&#x4F8B;&#xFF09;
&#x4F60;&#x5C06;h&#x5199;&#x6210;&#x5176;&#x4ED6;&#x5B57;&#x6BCD;&#x4E5F;&#x662F;&#x53EF;&#x4EE5;&#x7684;&#x3002;

render: function(createElement) {
       return createElement(App);
   }


import &apos;@/styles/index.scss&apos;
&#x4E3A;&#x4E86;&#x7B80;&#x5316;&#x5199;&#x6613;&#x9519;&#x7684;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;&#xFF0C;&#x76F4;&#x63A5;&#x89C4;&#x5B9A; @&#x5C31;&#x662F; /src&#x8FD9;&#x4E2A;&#x76EE;&#x5F55; &#x3002;


//&#x5982;&#x679C;&#x662F;&#x7528;vue&#x811A;&#x624B;&#x67B6;&#x642D;&#x5EFA;&#x7684; &#xFF0C;&#x5728; webpack.base.conf.js &#x4E2D;&#x9ED8;&#x8BA4;&#x5C06;main.js&#x4F5C;&#x4E3A;&#x5165;&#x53E3;&#xFF0C; &#x5982;&#x679C;&#x8981;&#x6539;&#x540D;&#x5B57;&#x7684;&#x8BDD;&#xFF0C;&#x5FC5;&#x987B;&#x8981;&#x5728;&#x914D;&#x7F6E;&#x4E2D;&#x505A;&#x76F8;&#x5E94;&#x6539;&#x53D8;
entry: {
  app: &apos;./src/main.js&apos;
},

// router/index.js &#x662F;&#x9ED8;&#x8BA4;&#x7684;&#x8DEF;&#x7531;&#x914D;&#x7F6E;&#x6587;&#x4EF6; &#x3002; &#x5728;&#x811A;&#x624B;&#x67B6;&#x7684;&#x54EA;&#x4E2A;&#x914D;&#x7F6E;&#x4E2D;&#x8BBE;&#x7F6E;&#x7684;&#x8FD9;&#x4E2A;&#x540D;&#x5B57; &#x6211;&#x6CA1;&#x6709;&#x627E;&#x5230; &#x3002;
</code></pre>
<footer class="page-footer"><span class="copyright">&#x65E0;&#x7248;&#x6743; &#x53EF;&#x4EE5;&#x65E0;&#x9650;&#x5236;&#x4F7F;&#x7528;&#xFF01; all right reserved&#xFF0C;powered by Gitbook</span><span class="footer-modification">&#x8BE5;&#x6587;&#x4EF6;&#x66F4;&#x65B0;&#x65F6;&#x95F4;&#xFF1A;
2018-10-25 15:48:05
</span></footer>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="alias.html" class="navigation navigation-prev " aria-label="Previous page: alias">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Vuex.html" class="navigation navigation-next " aria-label="Next page: Vuex">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"vueJS","level":"1.3.10","depth":2,"next":{"title":"Vuex","level":"1.3.11","depth":2,"path":"chinese/web/Vuex.md","ref":"chinese/web/Vuex.md","articles":[]},"previous":{"title":"alias","level":"1.3.9","depth":2,"path":"chinese/web/alias.md","ref":"chinese/web/alias.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-search","search-plus","todo","anchor-navigation-ex","copy-code-button","fontsettings","tbfed-pagefooter","donate","local-video","splitter","favicon","theme-comscore","local-video"],"styles":{"website":"styles/website.css"},"pluginsConfig":{"tbfed-pagefooter":{"copyright":"无版权 可以无限制使用！","modify_label":"该文件更新时间：","modify_format":"YYYY-MM-DD HH:mm:ss"},"todo":{},"splitter":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"donate":{"alipay":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_支付宝收款码.png","alipayText":"支付宝打赏","button":"打赏","title":"","wechat":"http://oyru0ayig.bkt.clouddn.com/201803011956_osChina_微信收款码.png","wechatText":"微信打赏"},"fontsettings":{"family":"sans","size":2,"theme":"sepia"},"highlight":{},"anchor-navigation-ex":{"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"mode":"float","multipleH1":true,"pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"printLog":false,"showGoTop":true,"showLevel":true},"favicon":{"shortcut":"assets/images/favicon.ico","bookmark":"assets/images/favicon.ico"},"theme-comscore":{},"local-video":{},"copy-code-button":{},"sharing":{"all":["facebook","google","twitter","weibo","instapaper"],"facebook":true,"google":false,"instapaper":false,"twitter":true,"vk":false,"weibo":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{}},"theme":"default","author":"Aivin","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Aivin开发笔记","language":"zh-hans","gitbook":"*","description":"Aivin开发笔记"},"file":{"path":"chinese/web/vueJS.md","mtime":"2018-10-25T07:48:05.761Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-12T07:42:16.699Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search-plus/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-copy-code-button/toggle.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-donate/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-local-video/video.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-theme-comscore/test.js"></script>
        
    

    </body>
</html>

